<template>
  <div class="owe-book">
    <!-- 导航 -->
    <van-nav-bar title="我的收藏" left-arrow @click-left="back()" />
    <!-- 导航栏 -->
    <div class="owe-nav">
      <span
        class="nav-item"
        :class="isLight == 0 ? 'active' : ''"
        @click="toBooks"
        >图书</span
      >
      <span
        class="nav-item"
        :class="isLight == 1 ? 'active' : ''"
        @click="toArticles"
        >文章</span
      >
    </div>
    <div class="body">
      <!-- contain -->
      <div class="contain" v-show="isLight == 0">
        <!-- BookItemA -->
        <BookItemA
          v-for="b in bookList.bookItems"
          :key="b.id"
          :book-name="b.name"
          :book-authors="b.authors"
          :cover-key="b.coverKey"
          :id="b.id"
        />
      </div>
      <!-- contain -->
      <div class="contain" v-show="isLight == 1">
        <ArticleItem
          v-for="a in bookList.articleListItems"
          :key="a.id"
          :coverKey="a.authorAvatarImageKey"
          :subject="a.subject"
          :authorNickName="a.authorNickName"
          :publishDate="a.publishDate"
          :tag="a.tags[0].name"
          @click.native="toArticle(a.id)"
        />
      </div>
    </div>
  </div>
</template>
  
  <script>
import { OweFavAPI } from "@/apis";
import BookItemA from "@/components/BookItem-A.vue";
import ArticleItem from "@/components/ArticleItem.vue";
export default {
  data() {
    return {
      // 参数
      type: "Books",
      page: 1,
      // 高亮状态
      isLight: 0,
      // bookList
      bookList: {},
    };
  },
  mounted() {
    this.getOweData();
  },
  watch: {
    type() {
      console.log(this.type);
      this.getOweData();
    },
  },
  methods: {
    // 网络请求
    async getOweData() {
      // 主要网络请求
      let { data } = await this.$http(OweFavAPI(this.type, this.page), {
        headers: {
          Authorization:
            "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
        },
      });
      console.log(data);
      this.bookList = data;
    },
    // 回退
    back() {
      this.$router.go(-1);
    },
    // to 文章
    toArticle(id) {
      this.$router.push({ path: `/article/${id}` });
    },
    // to Books
    toBooks() {
      this.isLight = 0;
      this.type = "Books";
    },
    // to Articles
    toArticles() {
      this.isLight = 1;
      this.type = "Articles";
    },
  },
  components: {
    BookItemA,
    ArticleItem,
  },
};
</script>
  
<style lang="scss" scoped>
.owe-book {
  position: relative;
  width: 100vw;
  background-color: #fff;
  z-index: 1999;
  .van-nav-bar {
    padding: 2px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  // 导航
  .owe-nav {
    padding: 65px 0 15px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--more-bg-white);
    .nav-item {
      margin: 0 10px;
      color: var(--more-font-grey);
      font-size: 14px;
      &.active {
        font-size: 20px;
        line-height: 26px;
        color: var(--book-name-font-black);
      }
    }
  }
  .body {
    padding: 15px;
    background-color: #fff;
    .search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        color: var(--theme-blue);
        font-size: 14px;
        line-height: 20px;
      }
    }
    .contain {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>
